import React, {Component} from 'react'
import {View, Text, Image, StyleSheet, TouchableOpacity} from 'react-native'
import HeaderView from "./mine_header";

export default class Mine extends Component {
    render() {
        return (
            <View>
                <HeaderView {...this.props}/>

                {this.renderCommentCeil(require('../../../imgs/collect.png'), '我的订单', '查看全部订单')}

                <View style={styles.mineTab}>
                    {this.renderTabView(require('../../../imgs/order1.png'), '待付款')}
                    {this.renderTabView(require('../../../imgs/order2.png'), '待使用')}
                    {this.renderTabView(require('../../../imgs/order3.png'), '待评价')}
                    {this.renderTabView(require('../../../imgs/order4.png'), '退款/售后')}
                </View>

                {this.renderCommentCeil(require('../../../imgs/like.png'), '抵用券', '0', 13)}
                {this.renderCommentCeil(require('../../../imgs/draft.png'), '小马哥钱包', '账户余额 ¥100', 3)}
                {this.renderCommentCeil(require('../../../imgs/card.png'), '积分商城', '', 13)}
                {this.renderCommentCeil(require('../../../imgs/new_friend.png'), '今日推荐', '', 13, require('../../../imgs/me_new.png'))}
                {this.renderCommentCeil(require('../../../imgs/pay.png'), '我要合作', '轻松开店，招财进宝', 13)}

            </View>
        )
    }

    renderTabView(imgSource, title) {
        return (
            <TouchableOpacity activeOpacity={0.6} style={{flex: 1, alignSelf: 'center'}}>
                <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                    <Image source={imgSource} style={{height: 30, width: 45}}/>
                    <Text style={{fontSize: 12, top: 3}}>{title}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    /**
     *
     * @param imageSource  左侧图片
     * @param title        左侧标题
     * @param subTitle     右侧提示
     * @param top          上间距
     * @param rightImgSource    右侧提示图片
     * @returns {*}
     */
    renderCommentCeil(imageSource, title, subTitle, top, rightImgSource) {
        return (
            <TouchableOpacity activeOpacity={0.5}>
                <View style={[styles.commentCeilContainer, {marginTop: top ? top : 0}]}>
                    <Image source={imageSource} style={styles.commentCeilImage}/>
                    <Text style={styles.commentCeilTitle}>{title}</Text>
                    {this.renderImageOrText(subTitle, rightImgSource)}
                    <Image source={require('../../../imgs/icon_cell_rightarrow.png')}
                           style={styles.commentCeilArrow}/>

                </View>
            </TouchableOpacity>
        )
    }

    renderImageOrText(subTitle, imgSource) {
        if (imgSource ? true : false) {
            return (
                <Image source={imgSource} style={{height: 10, width: 20, position: 'absolute', right: 30}}/>
            )
        } else {
            return (
                <Text style={styles.commentCeilSubTitle}>{subTitle}</Text>
            )
        }
    }

}

const styles = StyleSheet.create({
    mineTab: {
        top: 3,
        flexDirection: 'row',
        height: 70,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center'
    },

    commentCeilImage: {
        height: 25,
        width: 25,
        borderRadius: 25,
    },
    commentCeilTitle: {
        marginLeft: 10,
        fontSize: 14,
        color: '#000'
    },
    commentCeilSubTitle: {
        position: 'absolute',
        right: 30
    },
    commentCeilArrow: {
        height: 16,
        width: 10,
        position: 'absolute',
        right: 10
    },

    commentCeilContainer: {
        height: 48,
        flexDirection: 'row',
        paddingLeft: 15,
        paddingRight: 15,
        alignItems: 'center',
        backgroundColor: 'white'
    },
})